<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" id="favicon" href="${path}/imgs/index/favicon.ico" type="image/x-icon">
    <title>美食首页</title>
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css">
    <!-- 引入bootstrap.css - 开发环境/bootstrap.min.css - 生产环境-->
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <!-- 引入登录所需要的h+ -->
    <link href="${path}/plugins/Hplus/css/font-awesome.css" rel="stylesheet">

    <link href="${path}/plugins/Hplus/css/animate.css" rel="stylesheet">
    <link href="${path}/plugins/Hplus/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="${path}/css/index/index.css">
    <link rel="stylesheet" href="${path}/css/personal/personal.css">
    <link rel="stylesheet" href="${path}/css/order/order.css">
</head>
<body>
<%@include file="../nav/navbarheader.jsp"%>
<input type="hidden" name="userIdHid" value="${user.id}">
<div class="container-fluid myorder">
    <div class="ordercontainer">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>我的订单</legend>
        </fieldset>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">待付款</li>
                <li>已使用</li>
                <li>已过期</li>
            </ul>
            <div class="layui-tab-content" >
                <div class="layui-tab-item layui-show" style="margin-top: -30px">
                    <!-- 待付款 -->
                    <h2 id = "nopay"></h2>
                    <div style="height: 555px">

                        <table class="table table-condensed ordertab"  >
                            <p style="font-size: large">请尽快支付哦！超过二十分钟未支付则取消订单！</p>
                            <thead>
                            <tr>
                                <th>订单编号</th>
                                <th>套餐名称</th>
                                <th>订单图片</th>
                                <th>下单时间</th>
                                <th>数量</th>
                                <th>金额</th>
                                <th>状态</th>

                            </tr>
                            </thead>

                            <tbody id="content" >
                            <%--                        <tr>--%>
                            <%--                            <td><img src="${path}/imgs/index/recommend2.jpg" alt=""></td>--%>
                            <%--                            <td>--%>
                            <%--                                <p>牛排套餐</p>--%>
                            <%--                                <p>订单号：123465</p>--%>
                            <%--                                <p>有效期至:2022-05-10</p>--%>
                            <%--                            </td>--%>
                            <%--                            <td>2022-04-09 22:57:30</td>--%>
                            <%--                            <td>1</td>--%>
                            <%--                            <td>150元</td>--%>
                            <%--                            <td>--%>
                            <%--                                <a href="pay.html"> <button type="button" class="btn btn-outline btn-primary">支付</button></a><br>--%>
                            <%--                                <button type="button" class="btn btn-outline btn-danger">取消订单</button>--%>
                            <%--                            </td>--%>
                            <%--                        </tr>--%>

                            </tbody>

                        </table>
                    </div>
                    <div id="demo1" style="width: auto"></div>
                </div>
                <!-- 已使用 -->
                <div class="layui-tab-item" style="margin-top: -30px">
                    <h2 id = "nouse"></h2>
                    <div style="height: 525px">

                        <table class="table table-condensed ordertab">
                            <thead>
                            <tr>
                                <th>订单编号</th>
                                <th>套餐名称</th>
                                <th>订单图片</th>
                                <th>下单时间</th>
                                <th>数量</th>
                                <th>金额</th>
                                <th>状态</th>

                            </tr>
                            </thead>
                            <tbody id = "used">
                            <%--                        <tr>--%>
                            <%--                            <td><img src="${path}/imgs/index/recommend2.jpg" alt=""></td>--%>
                            <%--                            <td>--%>
                            <%--                                <p>牛排套餐</p>--%>
                            <%--                                <p>订单号：123465</p>--%>
                            <%--                                <p>有效期至:2022-05-10</p>--%>
                            <%--                            </td>--%>
                            <%--                            <td>2022-04-09 22:57:30</td>--%>
                            <%--                            <td>1</td>--%>
                            <%--                            <td>150元</td>--%>
                            <%--                            <td>--%>
                            <%--                                <button type="button" class="btn btn-outline btn-success">评价一下</button>--%>
                            <%--                            </td>--%>
                            <%--                        </tr>--%>
                            </tbody>
                        </table>
                    </div>
                    <div id="demo2"></div>
                </div>
                <!-- 已过期 -->
                <div class="layui-tab-item" style="margin-top: -30px">
                    <h2 id = "noout"></h2>
                    <div style="height: 525px">

                        <table class="table table-condensed ordertab" >
                            <thead>
                            <tr>
                                <th>订单编号</th>
                                <th>套餐名称</th>
                                <th>订单图片</th>
                                <th>下单时间</th>
                                <th>数量</th>
                                <th>金额</th>
                                <th>状态</th>

                            </tr>
                            </thead>
                            <tbody id="outdate">
                            </tbody>
                        </table>
                    </div>
                    <div id="demo3"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部导航 -->
<div class="bottom">
    <div class="bottominner">
        <div class="btmlogo">
            <img src="${path}/imgs/index/bottomicon.svg" alt="">
        </div>
        <div class="btmc1">
            © 2022 TripAdvisor LLC 保留所有权利。<br>
            <ul>
                <li><a href="">使用条款</a></li>
                <li><a href="">隐私和Cookie声明</a></li>
                <li><a href="">同意使用Cookie</a></li>
                <li><a href="">网站地图</a></li>
                <li><a href="">网站工作原理</a></li>
            </ul>
            <div class="btmc1-1">
                网站的此版本通常面向中文使用者，除非有针对其国家或地区的特定网站版本存在。 您可以使用下拉式菜单访问 Tripadvisor 网站面向特定国家或地区的其他版本。
                <a href="">更多</a>
            </div>
        </div>
    </div>

</div>

<script src="${path}/plugins/jquery.min.js"></script>
<script src="${path}/js/index/index.js"></script>
<script src="${path}/plugins/layui/layui.js"></script>
<script src="${path}/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="${path}/js/order/order.js"></script>
<script>
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;

        $(function () {
            let userId = $("input[name='userIdHid']").val();
            $.ajax({
                type: 'post',
                url: '/fr/order/SelectAllOrd/' + userId + '',
                xhrFields: {withCredentials: true},
                success: function (data) {
                    console.log(data);
                    laypage.render({
                        elem: 'demo1',
                        limit: 5
                        ,first: false
                        ,last: false
                        , count: data.length
                        , jump: function (obj) {
                            //模拟渲染
                            document.getElementById('content').innerHTML = function () {
                                var arr = []
                                    , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                                if (null != data && "" != data) {
                                    layui.each(thisData, function (index, item) {
                                        arr.push("<tr>\n" +
                                            "   <td>\n" +
                                            "       <p>" + item.ordCode + "</p>\n" +
                                            "   </td>\n" +
                                            "   <td>\n" +
                                            "       <p>" + item.goodsname + "</p>\n" +
                                            "   </td>\n" +
                                            "   <td>\n" +
                                            "<img src='${path}/imgs/storeInfo/"  + item.goodspic + "'>\n" +
                                            "</td>\n" +
                                            "   <td>" + item.ordCreateDate + "</td>\n" +
                                            "   <td>" + item.ordNum + "</td>\n" +
                                            "   <td>" + item.ordPrice + "</td>\n" +
                                            "   <td>\n" +
                                            "       <a href='/fr/pay/find/"+item.ordCode+"'> \n" +
                                            "<button type=\"button\" class=\"btn btn-outline btn-primary\">支付订单</button></a><br>\n" +
                                            "<a  class=\"btn btn-outline btn-danger\"  href='/fr/order/CencelOrd/" + item.id + "'>取消订单 </a>\n" +
                                            "   </td>\n" +
                                            "</tr>\n");
                                    });
                                }
                                else {
                                    $("#nopay").html("暂时没有订单哦！快去挑选购买吧");
                                }
                                return arr.join('');
                            }();
                        }
                    })
                }
            })
        });



        $(function () {
            let userId = $("input[name='userIdHid']").val();
            $.ajax({
                type: 'post',
                url: '/fr/order/UsedOrd/' + userId + '',
                success: function (data) {
                    laypage.render({
                        elem: 'demo2'
                        ,limit: 5
                        ,first: false
                        ,last: false
                        , count: data.length
                        , jump: function (obj) {
                            //模拟渲染
                            document.getElementById('used').innerHTML = function () {
                                var arr = []
                                    , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                                if (null != data && "" != data) {
                                    layui.each(thisData, function (index, item) {

                                        if(item.ordComState==5){
                                            arr.push(
                                            "<tr>\n" +
                                            "   <td>\n" +
                                            "       <p>" + item.ordCode + "</p>\n" +
                                            "   </td>\n" +
                                            "   <td>\n" +
                                            "       <p>" + item.goodsname + "</p>\n" +
                                            "   </td>\n" +
                                            "   <td>\n" +
                                            "<img src='${path}/imgs/storeInfo/"  + item.goodspic + "'>\n" +
                                            "</td>\n" +
                                            "   <td>" + item.ordCreateDate + "</td>\n" +
                                            "   <td>" + item.ordNum + "</td>\n" +
                                            "   <td>" + item.ordPrice + "</td>\n" +
                                            "   <td>\n"+
                                                "<button type=\"button\" class=\"btn btn-w-m btn-success col-md-8\">已评价</button>\n"+
                                                "   </td>\n"+
                                                "</tr>\n");
                                        }
                                        else{
                                            arr.push(
                                                "<tr>\n" +
                                                "   <td>\n" +
                                                "       <p>" + item.ordCode + "</p>\n" +
                                                "   </td>\n" +
                                                "   <td>\n" +
                                                "       <p>" + item.goodsname + "</p>\n" +
                                                "   </td>\n" +
                                                "   <td>\n" +
                                                "<img src='${path}/imgs/storeInfo/"  + item.goodspic + "'>\n" +
                                                "</td>\n" +
                                                "   <td>" + item.ordCreateDate + "</td>\n" +
                                                "   <td>" + item.ordNum + "</td>\n" +
                                                "   <td>" + item.ordPrice + "</td>\n" +
                                                "   <td>\n"+
                                                "<a class=\"btn btn-outline btn-success\"  href='/fr/reviews/" + item.shopId + "/"+item.id + "'> 评价一下 </a>\n" +
                                                "   </td>\n"+
                                                "</tr>\n");
                                        }
                                        });
                                } else {
                                    $("#nouse").html("暂时没有订单哦！快去挑选购买吧");
                                }
                                return arr.join('');
                            }();
                        }
                    });
                }
            });
        });

        $(function () {
            let userId = $("input[name='userIdHid']").val();
            $.ajax({
                type: 'post',
                url: '/fr/order/outdateOrd/'+userId+'',
                success: function (data) {
                    laypage.render({
                        elem: 'demo3',
                        limit: 5
                        ,first: false
                        ,last: false
                        , count: data.length
                        , jump: function (obj) {
                            //模拟渲染
                            document.getElementById('outdate').innerHTML = function () {
                                var arr = []
                                    , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                                if (null != data && "" != data) {
                                    layui.each(thisData, function (index, item) {
                                        arr.push( "<tr>\n"+
                                            "   <td>\n"+
                                            "       <p>"+item.ordCode+"</p>\n"+
                                            "   </td>\n"+
                                            "   <td>\n" +
                                            "       <p>" + item.goodsname + "</p>\n" +
                                            "   </td>\n" +
                                            "   <td>\n" +
                                            "<img src='${path}/imgs/storeInfo/"  + item.goodspic + "'>\n" +
                                            "</td>\n"+
                                            "   <td>"+item.ordCreateDate+"</td>\n"+
                                            "   <td>"+item.ordNum+"</td>\n"+
                                            "   <td>"+item.ordPrice+"</td>\n"+
                                            "   <td>\n"+
                                            "<a class=\"btn btn-outline btn-danger\"  href='/fr/groupon/enter/"+item.shopId+"/" + item.goodsId + "'>重新购买 </a>\n" +
                                            "   </td>\n"+
                                            "</tr>\n");
                                    });
                                } else {
                                    $("#noout").html("暂时没有订单哦！快去挑选购买吧");
                                }
                                return arr.join('');
                            }();
                        }
                    });
                }
            });
        });

    });
</script>
</body>
</html>